<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>学生资料</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(245, 245, 245, 1);
        }

        .layer1 {
            height: 70px;
            background: rgba(255, 255, 255, 1);
            margin-bottom: 10px;
            padding: 0 15px;
        }

        .layer1 img {
            width: 35px;
            height: 35px;
            margin-right: 10px;
            border-radius: 50%;
        }

        .layer1 .txt {
            font-size: 15px;
            font-weight: 500;
            color: rgba(25, 25, 25, 1);
        }

        .layer2 {
            height: 122px;
            padding-top: 15px;
            background: rgba(255, 255, 255, 1);
        }

        .head {
            padding: 0 15px;
        }

        .head .left {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .contents {
            margin-top: 16px;
        }

        .contents .item {
            width: 20%;
            text-align: center;
        }

        .contents .item img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin: 0 auto;
        }

        .contents .item .name {
            font-size: 13px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            margin-top: 7px;
        }

        .btn {
            width: 210px;
            height: 46px;
            margin: 22px auto;
            background: rgba(226, 83, 83, 1);
            box-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.09);
            border-radius: 23px;
            font-size: 15px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 21px;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="layer1" data-flex="cross:center">
            <img :src="student.icon" alt="">
            <div class="txt">{{ student.name }}</div>
        </div>
        <div class="layer2">
            <div class="head" data-flex="main:justify cross:center">
                <div class="left">学生报告</div>
            </div>
            <div class="contents" data-flex>
                <div class="item" onclick="handleIcon(3)">
                    <div>
                        <img src="../../image/ui/data5.png" alt="">
                    </div>
                    <div class="name">学习报告</div>
                </div>
                <div class="item" onclick="handleIcon(4)">
                    <div>
                        <img src="../../image/ui/data3.png" alt="">
                    </div>
                    <div class="name">跟读报告</div>
                </div>
                <div class="item" onclick="handleIcon(1)">
                    <div>
                        <img src="../../image/ui/data4.png" alt="">
                    </div>
                    <div class="name">错题集</div>
                </div>
            </div>
        </div>
        <div class="btn" v-if="memberType == 2" data-flex="main:center cross:center"
            @click="fnOpenAlert({alertType:'10',alertConfirmFn:'clearStudent'})">
            移除学生
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam;
    var classId = '';
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam.item;
        classId = api.pageParam.classId;
        fnInit();
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                memberType: USER.Get('memberType', true),
                student: pageParam,
                nav: [
                    {
                        title: '课程',
                        to: 'course/index'
                    },
                    {
                        title: '班级',
                        to: 'class/index'
                    },
                    {
                        title: '习题报告',
                        to: 'class/select_model',
                        param: {
                            reportType: 1,
                            from: 'index'
                        }
                    },
                    {
                        title: '跟读报告',
                        to: 'class/select_model',
                        param: {
                            reportType: 2,
                            from: 'index'
                        }
                    }
                ]
            }
        });
    }

    // 学习报告
    function handleIcon(type) {
        if(vm.memberType == 1 && pageParam.id == USER.Get('custId')) {
            // 学生看自己的
            if(type != 1)
                fnOpenPublicWin(vm.nav[type-1].title, vm.nav[type-1].to, vm.nav[type-1].param);
            else 
                fnOpenPublicWin('错题集', 'class/select_model', {
                    error: '1',
                    reload: true,
                    isBtn: false,
                    from: 'index'
                });
        }else if(vm.memberType == 2) {
            if(type != 1) {
                // 3 全部学期，单元->跟人班级均分，学期列表->跟人班级均分，单元列表->详情
                // 4 全部学期，单元->跟人班级均分，学期列表->跟人班级均分，单元列表->详情
                fnOpenPublicWin(type == 3 ? '学习报告' : '跟读报告', 'class/report_detail', {
                    reportType: type,
                    from: 'student',
                    custId: pageParam.id,
                    classId: classId
                });
            }else {
                handleError();
            }
        }
    }

    // 错题报告
    function handleError() {
        // 错题率，学期->错题率，单元->错题详情
        fnOpenPublicWin('错题集', 'class/review_data', {
            reportType: 1,
            from: 'student',
            custId: pageParam.id
        });
    }

    // 移除学生
    function clearStudent() {
        var url = 'clsClass/removeStudent';
        var params = {
            "classMemberId": vm.student.id,
            'classesId': classId
        };
        var callback = function (data) {
            fnToast('移除成功');
            api.sendEvent({
                name: 'deleteStudent'
            });
            api.closeWin();
        };
        POST(url, params, callback);
    }
</script>

</html>